<template>
  <div class="loginBody">
    <div class="login">
      <vue-particles
          class="login-bg"
          color="#39AFFD"
          :particleOpacity="0.7"
          :particlesNumber="100"
          shapeType="circle"
          :particleSize="4"
          linesColor="#8DD1FE"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
      >
      </vue-particles>
    </div>

    <div class="loginDiv">
      <div class="login-content">
        <h1 class="login-title">社团后台管理系统</h1>
        <el-form :model="loginForm" label-width="100px"
                 :rules="rules" ref="loginForm">
          <el-form-item label="账号" prop="user">
            <el-input style="width: 200px" type="text" v-model="loginForm.user" placeholder="请输入账号"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input style="width: 200px" type="password" v-model="loginForm.password" placeholder="请输入密码"
                      show-password autocomplete="off" size="small" ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="graphCode" style="width: 300px">
            <el-input style="width: 200px" type="text" v-model="loginForm.graphCode" placeholder="请输入验证码"
                      autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
          </el-form-item>
          <div @click="refreshCode" style="cursor: pointer;" class="login-code">
            <SIdentify :identifyCode="identifyCode"></SIdentify>
          </div>
            <el-checkbox label="记住我" name="remember" v-model="remember" class="remember"></el-checkbox>
          <el-form-item>
            <el-button class="button" type="primary" @click="confirm" :disabled="confirm_disabled">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login"
// 引入图片验证码组件
import SIdentify from "@/components/identify.vue"
//引入cookie
import Cookies from 'js-cookie'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
    name: "Login",
  components: { SIdentify },
    data(){
      return{
        confirm_disabled:false,
        remember:false,
        loginForm:{
          user:'',
          password:'',
          graphCode:'',
        },
        rules:{
          user: [
              { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          graphCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
        },
        // 图片验证码
        identifyCode: '',
        // 验证码规则
        identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      }
    },
    watch: {
    // 监听remember的变化
    remember() {
      this.saveRememberStatus();
    }
  },
    methods:{
      // 切换验证码
      refreshCode() {
        this.identifyCode = ''; // 清空原有验证码
        this.makeCode(this.identifyCodes, 4); // 生成新的验证码
      },
      // 生成随机验证码
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
              Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
              ]
        }
      },
      // 把邮箱和密码保存到localStorage
    saveRememberStatus() {
      if(this.remember == true){
        localStorage.setItem('user', this.loginForm.user);
        localStorage.setItem('password',this.loginForm.password)
      }    
    },
      confirm(){
        this.confirm_disabled=true;
        this.$refs.loginForm.validate((valid) => {
          if (valid) { //valid成功为true，失败为false
            //校验验证码是否正确
            if (this.loginForm.graphCode !== this.identifyCode){
              this.$message.error('验证码错误，请注意大小写!');
              this.confirm_disabled=false;
              return false;
            }
              //去后台验证用户名密码
              login({
                password: this.loginForm.password,
                user: this.loginForm.user,
              }).then(res=>{
                console.log(res);
                if(res.code===20000){
                  //存储      
                  Cookies.set('token', res.data.token, { expires: 7 });
                  Cookies.set('username', this.loginForm.user, { expires: 7 });
                  //跳转到主页
                  this.$router.push('/Index');
                }else{
                  this.confirm_disabled=false;
                  this.$message.error('校验失败，用户名或密码错误!');
                  return false;
                }
              });
          } else {
            this.confirm_disabled=false;
            this.$message.error('校验失败!');
            return false;
          }
        });
      },
    },
  mounted () {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    this.loginForm.user = localStorage.getItem('user') || '';
    this.loginForm.password = localStorage.getItem('password') || '';
  },
  }
</script>

<style scoped>
.loginBody {
  position: absolute;
  width: 100%;
  height: 100%;
}
.loginDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 450px;
  height: 365px;
  background: #fff;
  border-radius: 5%;
  background-color: rgba(255, 255, 255, 0.5)

}
.login-title {
  margin: 25px 0;
  text-align: center;
}
.login-content {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 25px;
  left: 25px;
}
.button{
 padding: 10px 20px;
  /* font-size: 17px;
  border-radius: 26px;*/
  margin-left: 60px;
}
.remember{
  margin-left: 100px;
  margin-bottom: 10px;
}

/*粒子背景效果*/
.login{
  width: 100%;
  height: 100%;
/*color: #cccccc;
  如果想做背景图片 可以给标签一个class 直接添加背景图
position: relative;*/
}
/*如果是全屏展示*/
   .login-bg{
     width: 100%;
     height: 100%;
     background: #3E3E3E;
   }
/*验证码样式*/
.login-code{
  float: right;
  width: 122px;
  margin-right: -20px;
  margin-top: -55px;
}
</style>
